<template>
  <el-dialog
    :model-value="dialogVisible"
    title="查看"
    align-center
    @close="$emit('close')"
    width="700px"
    draggable
    style="margin: auto"
  >
    <el-descriptions :column="2" label-width="140px" style="margin-left: 5%">
      <el-descriptions-item label="员工姓名:"
        >{{ infoOptions.data.nickname || '--' }}
      </el-descriptions-item>
      <el-descriptions-item label="员工编号:">
        {{ infoOptions.data.username || '--' }}
      </el-descriptions-item>
      <el-descriptions-item label="归属机构:">
        {{ infoOptions.data.deptName || '--' }}
      </el-descriptions-item>
      <el-descriptions-item label="归属系统:">
        {{ infoOptions.data.sysName || '--' }}
      </el-descriptions-item>
      <el-descriptions-item label="手机号码:">
        {{ infoOptions.data.mobile || '--' }}
      </el-descriptions-item>
      <el-descriptions-item label="用户性别:">
        {{ sexList[infoOptions.data.sex] || '--' }}
      </el-descriptions-item>
      <el-descriptions-item label="用户类型:">
        {{ infoOptions.data.type || '--' }}
      </el-descriptions-item>
      <el-descriptions-item label="邮箱:">
        {{ infoOptions.data.email || '--' }}
      </el-descriptions-item>
      <el-descriptions-item label="备注:">
        {{ infoOptions.data.remark || '--' }}
      </el-descriptions-item>
    </el-descriptions>
    <template #footer>
      <el-button @click="$emit('close')">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="jsx">
import { getUser } from '@/api/system/user'
const emit = defineEmits('close')
const sexList = ['未知', '男', '女']

const props = defineProps({
  dialogVisible: {
    default: false,
    type: Boolean
  },
  id: {
    default: null,
    type: Number || String
  }
})
const infoOptions = reactive({
  data: {}
})
const getUserInfo = async () => {
  const data = await getUser(props.id)
  infoOptions.data = data
}
onMounted(() => {
  getUserInfo()
})
</script>

<style lang="scss" scoped></style>
